<template>
	<div class="vip-card" @click.stop="buy">
		<image class="vip-bg" src="https://oss.jxhecong.com/v2/image/vip_bar@2x.png"></image>
		<div class="vip-content">
			<div class="price">
				<text style="color: #FA3534;font-size:28rpx;margin-top:35rpx;">¥</text>
				<text style="color: #FA3534;font-size:60rpx;font-weight: bold;">30</text>
			</div>
			<div class="card-info">
				<text class="vip-name">单月卡（30天）</text>
				<text class="vip-sub-name">可充电60次，每次0.5元</text>
			</div>
			<text class="buy">去购买</text>
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			data:{
				type:Object,
				default:{}
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			buy(){
				this.$emit('buy',this.data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.vip-card{
		height:120rpx;
		margin:18rpx 24rpx;
		.vip-bg{
			flex:1;
			height:120rpx;
		}
	}
	.vip-content{
		padding:0rpx 18rpx;
		position: absolute;
		left:0rpx;
		right:0rpx;
		top:0rpx;
		bottom:0rpx;
		display: flex;
		flex-direction:row;
		justify-content: space-between;
		align-items: center;
	}
	.price{
		display: flex;
		flex-direction:row;
		justify-content: flex-start;
	}
	.card-info{
		flex:1;
		margin-left:60rpx;
		.vip-name{
			color:#202020;
			font-size:28rpx;
			font-weight: bold;
		}
		.vip-sub-name{
			color:#303133;
			font-size: 22rpx;
			margin-top:6rpx;
		}
	}
	.buy{
		background-color:#03D0B2;
		height:48rpx;
		width:144rpx;
		line-height:48rpx;
		border-radius:24rpx;
		text-align: center;
		color:#FFFFFF;
		font-size:28rpx;
	}
</style>
